<template>

	<view class="center">
		<view class="logo">
			<image class="logo-img" :src="baseUrl + data?.avatar || staticUrl"></image>
			<view class="logo-title">
				<text class="uer-name">{{ data?.staffName }}
					<view class="info" @click="personInfo(`/pages/user/personInfo?id=${data.userId}`)">更多信息</view>
				</text>
			</view>
		</view>
		<view class="mt-5 mb-5">
			<view class="flex flex-a-center  flex-j-between bottom-border-solid p-15 bg-white mt-5 mb-5"
				@click="skip('/pages/user/updateSign')">
				<text>我的签名</text>
				<uni-icons type="forward" size="16"></uni-icons>
			</view>
		</view>
<!-- 		<view class="mt-5 mb-5">
			<view class="flex flex-a-center  flex-j-between bottom-border-solid p-15 bg-white mt-5 mb-5"
				@click="skip('/pages/sign/sign')">
				<text>我的签名2</text>
				<uni-icons type="forward" size="16"></uni-icons>
			</view>
		</view> -->
		<view class="mt-5 mb-5">
			<view class="flex flex-a-center  flex-j-between bottom-border-solid p-15 bg-white mt-5 mb-5"
				@click="skip('/pages/weixin/index')">
				<text>微信绑定</text>
				<uni-icons type="forward" size="16"></uni-icons>
			</view>
		</view>

		<button class="btn-row" hover-class="none" @click="jumpLogin(true)">
			{{ data?.token ? "退出登录" : "去登录" }}
		</button>
	</view>

</template>

<script setup lang="ts">
	import {
		baseUrl
	} from "@/utils/httpInterceptor";
	import {
		ref
	} from "vue";
	import {
		useAuthStore
	} from "@/store/modules/auth";
	import Storage from "@/utils/storageCache";
	import {
		jumpLogin
	} from "@/utils/routerInterceptor";
	import {
		onShow
	} from "@dcloudio/uni-app";
	let data = ref < any > ({})
	onShow(() => {
		data.value = Storage.get("userInfo");
	})

	const staticUrl = "./static/images/avatar.png";

	const skip = (v: any) => {
		uni.navigateTo({
			url: v
		})
	}
	const personInfo = (url:any) => {
		uni.navigateTo({
			url: url,
		})
	}
</script>

<style lang="scss" scoped>
	page,
	view {
		font-size: $uni-font-size-sm;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		height: 240rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: $uni-color-primary;
		flex-direction: row;
		align-items: center;
	}

	.logo-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 150rpx;
	}

	.logo-title {
		height: 150rpx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20rpx;
	}

	.uer-name {
		height: 60rpx;
		line-height: 60rpx;
		color: #ffffff;
	}

	.login-title {
		height: 150rpx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.center-list {
		margin-top: 20rpx;
		flex-direction: column;
		font-size: $uni-font-size-sm;
	}

	.btn-row {
		position: absolute;
		bottom: 20px;
		right: 0;
		left: 0;
		width: 80%;
		margin: auto;
		background-color: $uni-color-primary;
		border-radius: 8rpx;
		color: #ffffff;
		font-size: $uni-font-size-base;

		:hover {
			background-color: $uni-color-primary;
		}
	}

	.info {
		float: right;
	}
</style>
